﻿<template>
  <div class="sysMqPublish-container">
    <el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item label="关键字">
          <el-input v-model="queryParams.searchKey" clearable="" placeholder="请输入模糊查询关键字"/>
          
        </el-form-item>
        <el-form-item label="唯一标识">
          <el-input v-model="queryParams.aSoleId" clearable="" placeholder="请输入唯一标识"/>
          
        </el-form-item>
        <el-form-item label="Rabbit账号">
          <el-input v-model="queryParams.user" clearable="" placeholder="请输入Rabbit账号"/>
          
        </el-form-item>
        <el-form-item label="发布者">
          <el-input v-model="queryParams.routingKeys" clearable="" placeholder="请输入发布者"/>
          
        </el-form-item>
		<el-form-item label="是否订阅成功" prop="handlerResult">
		 <el-switch v-model="queryParams.handlerResult" active-text="是" inactive-text="否" />
		</el-form-item>
        <el-form-item label="消息体">
          <el-input v-model="queryParams.payload" clearable="" placeholder="请输入消息体"/>
          
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button type="primary"  icon="ele-Search" @click="handleQuery" v-auth="'sysMqPublish:page'"> 查询 </el-button>
            <el-button icon="ele-Refresh" @click="() => queryParams = {}"> 重置 </el-button>
            
          </el-button-group>
          
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="ele-Plus" @click="openAddSysMqPublish" v-auth="'sysMqPublish:add'"> 新增 </el-button>
          <el-button type="primary" icon="ele-FolderOpened" @click="exportSysMqPublish" v-auth="'sysMqPublish:export'"> 导出 </el-button>
          <el-button type="primary" icon="ele-UploadFilled" @click="openUploadDialog" v-auth="'sysMqPublish:import'">导入数据</el-button>
          <el-button type="primary" icon="ele-Download" @click="downLoadTemplate" v-auth="'sysMqPublish:templateDown'"> 下载模板 </el-button>
          
        </el-form-item>
        
      </el-form>
    </el-card>
    <el-card class="full-table" shadow="hover" style="margin-top: 8px">
      <el-table
				:data="tableData"
				style="width: 100%"
				v-loading="loading"
				tooltip-effect="light"
				row-key="id"
				border="">
        <el-table-column type="index" label="序号" width="55" align="center"/>
        <el-table-column prop="aSoleId" label="唯一标识" width="140" show-overflow-tooltip="" />
        <el-table-column prop="user" label="Rabbit账号" width="120" show-overflow-tooltip="" />
        <el-table-column prop="routingKeys" label="发布者" width="140" show-overflow-tooltip="" />
        <el-table-column prop="payload" label="消息体" width="140" show-overflow-tooltip="" />
        <el-table-column prop="handlerResult" label="是否发布成功" width="120" show-overflow-tooltip="">
          <template #default="scope">
            <el-tag v-if="scope.row.handlerResult"> 是 </el-tag>
            <el-tag type="danger" v-else> 否 </el-tag>
            
          </template>
          
        </el-table-column>
        <el-table-column label="操作" width="140" align="center" fixed="right" show-overflow-tooltip="" v-if="auth('sysMqPublish:edit') || auth('sysMqPublish:delete')">
          <template #default="scope">
            <el-button icon="ele-Edit" size="small" text="" type="primary" @click="openEditSysMqPublish(scope.row)" v-auth="'sysMqPublish:edit'"> 编辑 </el-button>
            <el-button icon="ele-Delete" size="small" text="" type="primary" @click="delSysMqPublish(scope.row)" v-auth="'sysMqPublish:delete'"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
				v-model:currentPage="tableParams.page"
				v-model:page-size="tableParams.pageSize"
				:total="tableParams.total"
				:page-sizes="[10, 20, 50, 100, 200]"
				small=""
				background=""
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				layout="total, sizes, prev, pager, next, jumper"
	/>
      <editDialog
        ref="editDialogRef"
        :title="editSysMqPublishTitle"
        @reloadTable="handleQuery"
      />
    </el-card>

    		<el-dialog v-model="state.dialogUploadVisible" :lock-scroll="false" draggable width="400px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle">
						<ele-UploadFilled /> </el-icon>
					<span> 上传文件 </span>
				</div>
			</template>
			<div>
				<el-upload ref="uploadRef" drag :auto-upload="false" :limit="1" :file-list="state.fileList" action=""
					:on-change="handleChange" accept=".xls,.xlsx">
					<el-icon class="el-icon--upload">
						<ele-UploadFilled />
					</el-icon>
					<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					<template #tip>
						<div class="el-upload__tip">请上传大小不超过 10MB 的文件</div>
					</template>
				</el-upload>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="state.dialogUploadVisible = false">取消</el-button>
					<el-button type="primary" @click="uploadFile">确定</el-button>
				</span>
			</template>
		</el-dialog>

  </div>
</template>

<script lang="ts" setup="" name="sysMqPublish">
  import { ref,reactive } from "vue";
  import { ElMessageBox, ElMessage,UploadInstance } from "element-plus";
  import { auth } from '/@/utils/authFunction';
  import { downloadByData, getFileName } from '/@/utils/download';
  //import { formatDate } from '/@/utils/formatTime';

  import editDialog from '/@/views/system/sysMqPublish/component/editDialog.vue'
  import { pageSysMqPublish, deleteSysMqPublish,exportSysMqPublishExcel } from '/@/api/system/sysMqPublish';
  import { SysFile } from '/@/api-services/models';
  import request from '/@/utils/request';
  	const uploadRef = ref<UploadInstance>();
	const state = reactive({
		loading: false,
		fileData: [] as Array<SysFile>,
		queryParams: {
			fileName: undefined,
			startTime: undefined,
			endTime: undefined,
		},
		tableParams: {
			page: 1,
			pageSize: 10,
			total: 0 as any,
		},
		dialogUploadVisible: false,
		dialogPdfVisible: false,
		fileList: [] as any,
		pdfUrl: '',
	});
  const editDialogRef = ref();
  const loading = ref(false);
  const tableData = ref<any>([]);
  const queryParams = ref<any>({});
  const tableParams = ref({
  page: 1,
  pageSize: 10,
  total: 0,
  });
  const editSysMqPublishTitle = ref("");

  	// 打开上传页面
	const openUploadDialog = () => {
		state.fileList = [];
		state.dialogUploadVisible = true;
	};

	// 通过onChanne方法获得文件列表
	const handleChange = (file : any, fileList : []) => {
		state.fileList = fileList;
	};

	// 上传
	const uploadFile = async () => {
		if (state.fileList.length < 1) return;
		var url = `api/sysMqPublish/Import`

		var formData = new window.FormData();
		formData.append('file', state.fileList[0].raw);
		var res = await request(
			{
				url: url,
				method: 'post',
				data: formData,
				headers: { 'Content-Type': 'multipart/form-data' }
			}
		)
		ElMessage.success('上传成功');
		handleQuery();
		state.dialogUploadVisible = false;
	};

  //导出
    const exportSysMqPublish=async()=>{
	   var res =await exportSysMqPublishExcel(queryParams.value);
	   var fileName = getFileName(res.headers);
	   downloadByData(res.data as any, fileName);
   };

   //下载模板
   	const downLoadTemplate = async () => {
		var url = `api/sysMqPublish/TemplateDown`
		var res = await request({
			url: url,
			method: 'get',
			responseType: 'blob'
		});
		var fileName = getFileName(res.headers);
		downloadByData(res.data as any, fileName);
	}

  // 查询操作
  const handleQuery = async () => {
    loading.value = true;
    var res = await pageSysMqPublish(Object.assign(queryParams.value, tableParams.value));
    tableData.value = res.data.result?.items ?? [];
    tableParams.value.total = res.data.result?.total;
    loading.value = false;
  };

  // 打开新增页面
  const openAddSysMqPublish = () => {
    editSysMqPublishTitle.value = '添加队列发布';
    editDialogRef.value.openDialog({});
  };

  // 打开编辑页面
  const openEditSysMqPublish = (row: any) => {
    editSysMqPublishTitle.value = '编辑队列发布';
    editDialogRef.value.openDialog(row);
  };

  // 删除
  const delSysMqPublish = (row: any) => {
    ElMessageBox.confirm(`确定要删除吗?`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
  .then(async () => {
    await deleteSysMqPublish(row);
    handleQuery();
    ElMessage.success("删除成功");
  })
  .catch(() => {});
  };

  // 改变页面容量
  const handleSizeChange = (val: number) => {
    tableParams.value.pageSize = val;
    handleQuery();
  };

  // 改变页码序号
  const handleCurrentChange = (val: number) => {
    tableParams.value.page = val;
    handleQuery();
  };


  handleQuery();
</script>


